<template>
    <div>
        <div class="tree-bar tree aside white-block">
            <scroll-bar ref="treeBar" class="treeBar" :wrapStyle.sync="sidebarStyle">
                <el-tree :data="data1" :props="defaultProps" :load="loadNode" :lazy="true" @node-click="checkChange"
                         @node-expand="checkChange1($event,'treeBar')" @node-collapse="checkChange1($event,'treeBar')"
                         :current-node-key="1"
                         :expand-on-click-node="false"
                         node-key="id" :default-expanded-keys="[0,1]" :highlight-current="true"
                         :default-checked-keys="[1]" ref="tree">
                   <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                        <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                        <span class="el-tree-node__label">{{ data.name }}</span>
                        <span
                            class="el-tree-node__label">{{ data.haschildren == 0 ? '' : ' (' + data.count + ') ' }}</span>
                    </span>
                </el-tree>
            </scroll-bar>
        </div>
        <div class="main">
            <div class="content-top white-block" v-if="providerSystemMsg">
                <breadcrumb :title="'目录管理'">
                    <div class="text-right">
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="visible=true">新增子目录
                        </el-link>
                        <el-link type="primary limit" size="medium" :underline="false" @click="directoryTree = true"
                                 v-if="directoryMigration" class="second catalogue">目录迁移
                        </el-link>
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="delTree"
                                 v-if="directoryDeletion">目录删除
                        </el-link>
                    </div>
                </breadcrumb>
                <!--                <div class="text-right">-->
                <!--                    <el-link type="primary limit" size="medium" @click="visible=true">新增子目录</el-link>-->
                <!--                    <el-link type="primary limit" size="medium" @click="directoryTree = true"-->
                <!--                             v-if="directoryMigration">&nbsp;&nbsp;|&nbsp;&nbsp;目录迁移&nbsp;&nbsp;|&nbsp;&nbsp;-->
                <!--                    </el-link>-->
                <!--                    <el-link type="primary limit" size="medium" @click="delTree" v-if="directoryDeletion">目录删除-->
                <!--                    </el-link>-->
                <!--                </div>-->
                <div class="toolbar">
                    <div class="current provider">
                        <span>当前目录名：</span>
                        <el-input v-model="currentTreeInput" v-if="inputBox"></el-input>
                        <el-input v-model="currentTreeInput" :disabled="true" v-if="disinputBox"></el-input>
                        <el-button type="primary limit" size="medium" @click="update2" v-if="proUpdate">编辑</el-button>
                    </div>
                </div>
            </div>
            <div class="message white-block mt10" v-if="providerSystemMsg">
                <breadcrumb :title="'提供者系统信息'"></breadcrumb>
                <div class="toolbar">
                    <div class="provider">
                        <el-input v-model="input" placeholder="请输入系统名称" class="input mr10"
                                  @keyup.enter="getPage(1)"></el-input>
                        <el-button type="primary" @click="getPage(1)">查询</el-button>
                    </div>
                    <div class="text-right">
                        <el-button type="primary" @click="newSystem=true">新建</el-button>
                    </div>
                </div>

                <div class="table atomicTable">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :highLight="true"
                                   v-loading="loading"
                                   @tabCurrentChange="tabCurrentChange"
                                   @row-click="handleClick" @cell-mouse-enter="handClick" :highlight-current-row="true"
                                   class="mt20">
                        <template slot="status" slot-scope="scope">
                            <span v-if="scope.row.status == 1">在用</span>
                            <span v-if="scope.row.status == 0">不在用</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <!--                            <el-link type="primary" :underline="false" class="mr10" @click="details">详情</el-link>-->
                            <el-link type="primary" :underline="false" class="mr10" @click.stop
                                     @click="migration(scope.row.treeId)">
                                迁移
                            </el-link>
                            <!--                            <el-link type="primary" :underline="false" class="mr10" @click="del">删除</el-link>-->

                        </template>
                    </table-example>
                    <page :data="page" v-if="page" class="mt20 page" @jumpPage="getPage"></page>

                </div>
            </div>

            <!--  系统详情-->
            <div class="white-block system-details" v-if="flag">
                <breadcrumb :title="'系统信息'">
                    <el-button type="primary" @click="updateSystemDet">编辑</el-button>
                    <el-button type="" @click="del">删除</el-button>
                    <el-button type="" @click="gotolink">原子服务</el-button>
                </breadcrumb>
                <div class="sysDet">
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple ">
                                <span class="sysTitle">系统名称：</span>
                                <span class="sysContenrt">{{sysMsgDet.systemName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统编码：</span>
                                <span class="sysContenrt">{{sysMsgDet.systemCode}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">管理部门：</span>
                                <span class="sysContenrt">{{sysMsgDet.manageName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">联系人：</span>
                                <span class="sysContenrt">{{sysMsgDet.pname}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">联系方式：</span>
                                <span class="sysContenrt">{{sysMsgDet.pphone}}</span>
                            </div>
                        </el-col>
                        <el-col :span="12" style="margin-left: 1rem">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle"></span>
                                <span class="sysContenrt"></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <!--  新建系统-->
        <dialog-msk :show.sync="newSystem" ref="dialog" :width="'7rem'" :center="true" :title="'新建系统'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addSystem"
                    @cancel="addClose">
            <div>
                <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="110px">

                    <el-form-item label="系统名称" prop="systemName">
                        <el-input v-model="addForm.systemName" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="系统编码" prop="systemCode">
                        <el-input v-model="addForm.systemCode" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="管理部门" prop="manageName">
                        <el-input v-model="addForm.manageName" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系人" prop="pname">
                        <el-input v-model="addForm.pname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="pphone">
                        <el-input v-model="addForm.pphone" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>
        <!--  新增子目录弹框-->
        <dialog-msk :show.sync="visible" ref="dialog" :center="true" :title="'新增子目录'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addTree"
                    @cancel="close">
            <div>
                <el-form ref="form" :model="ruleForm" :rules="rules" label-width="110px">
                    <el-form-item label="新增子目录" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!-- 编辑系统-->
        <dialog-msk :show.sync="updateSystemFlag" ref="dialog" :width="'7rem'" :center="true" :title="'编辑系统'"
                    :noEsc="false"
                    :noModal="false"
                    @save="updateSystem"
                    @cancel="updateAddClose">
            <div>
                <el-form ref="sysMsg" :model="sysMsg" :rules="sysMsgRules" label-width="110px">
                    <el-form-item label="系统名称" prop="systemName">
                        <el-input v-model="sysMsg.systemName"></el-input>
                    </el-form-item>
                    <el-form-item label="系统编码">
                        <el-input v-model="sysMsg.systemCode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="管理部门" prop="manageName">
                        <el-input v-model="sysMsg.manageName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="pname">
                        <el-input v-model="sysMsg.pname"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="pphone">
                        <el-input v-model="sysMsg.pphone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <!--  目录迁移-->
        <dialog-msk :show.sync="directoryTree" ref="dialog" :center="true" :title="'目录'"
                    @save="save1"
                    @cancel="close"
                    :noEsc="false"
                    :noModal="false">
            <div>
                <div class="tree1 treeBar">
                    <el-tree :data="directoryData" :props="defaultProps" :load="loadNode2" :lazy="true"
                             @node-click="checkChange2"
                             @node-expand="checkChange1" @node-collapse="checkChange1" :expand-on-click-node="false"
                             :default-expanded-keys="[1]"
                             :highlight-current="true" node-key="id" ref="tree1">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                            <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                            <span class="el-tree-node__label">{{ data.name }}</span>
                        </span>
                    </el-tree>
                </div>

            </div>
        </dialog-msk>

        <!--  节点迁移弹框-->
        <dialog-msk :show.sync="nodeMigration" ref="dialog" :center="true" :title="'节点迁移'"
                    @save="save"
                    @cancel="close"
                    :noEsc="false"
                    :noModal="false">
            <div>
                <div class="tree1 treeBar">
                    <el-tree :data="nodeData" :props="defaultProps" :load="loadNode1" :lazy="true"
                             @node-click="checkChange2" :expand-on-click-node="false"
                             @node-expand="checkChange1" @node-collapse="checkChange1" :default-expanded-keys="[1]"
                             :highlight-current="true" node-key="id" ref="tree1">
                         <span class="custom-tree-node" slot-scope="{ node, data }">
                             <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                             <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                             <span class="el-tree-node__label">{{ data.name }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </dialog-msk>
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import scrollBar from '@/components/scrollbar'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            let patter = /^[0-9a-zA-Z._]+$/,
                systemCode = (rule, value, callback) => {
                    if (!patter.test(value)) {
                        return callback(new Error('编码只能出现"."或者或者"_"数字或者字母'))
                    } else {
                        callback()
                    }
                },
                num = /^[0-9-]*$/,
                number = (rule, value, callback) => {
                    if (value && !num.test(value)) {
                        return callback(new Error('只能出现数字或者"-"'))
                    } else {
                        callback()
                    }
                }
            return {
                sidebarStyle: null,
                loading: false,
                input: '',
                name: '', // 当前目录名
                tableData: [],
                header: [
                    {
                        prop: 'systemName',
                        label: '系统名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'systemCode',
                        label: '系统编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'manageName',
                        label: '管理部门',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pname',
                        label: '联系人',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pphone',
                        label: '联系方式',
                        minWidth: 90,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 80,
                        align: 'center',
                        headerAlign: 'center'
                        // fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'status'],
                data1: null,
                directoryData: null,
                nodeData: null,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: function (data, node) {
                        if (!data.haschildren) return true
                    }
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}

                    ]
                },
                ruleForm: {
                    name: '',
                    type: 0
                },
                currentTree: null,
                dirCurrentTree: null,
                update: null,
                highlightCurrent: false,
                defaultExpandAll: false,
                visible: false,
                newSystem: false,
                nodeMigration: false, // 节点迁移
                directoryTree: false,
                addForm: {
                    systemName: '',
                    systemCode: '',
                    pname: '',
                    pphone: '',
                    manageName: ''
                },
                addRules: {
                    systemName: [
                        {required: true, message: '请输入系统名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                        // {validator: systemCode}
                    ],
                    pname: [
                        {required: false, message: '请输入联系人', trigger: 'blur'},
                        {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
                    ],
                    pphone: [
                        {required: false, message: '请输入联系方式', trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'},
                        {validator: number}
                    ],
                    manageName: [
                        {required: true, message: '请输入管理部门', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ],
                    systemCode: [
                        {required: true, message: '请输入系统编码', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: systemCode}
                    ]
                },
                sysMsgRules: {
                    systemName: [
                        {required: true, message: '系统名称不能为空', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    pname: [
                        {required: false, message: '联系人不能为空', trigger: 'blur'},
                        {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
                    ],
                    pphone: [
                        {required: false, validator: number, trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'}
                    ],
                    manageName: [
                        {required: true, message: '管理部门不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur'}
                    ]
                },
                sysMsg: {}, // 系统信息
                sysMsgDet: {},
                page: null, // 分页
                index: 1,
                flag: false, // 系统详情
                providerSystemMsg: true, // 提供者信息
                id: null,
                detailsId: null,
                directoryDeletion: false,
                proUpdate: false,
                directoryMigration: false,
                node_had: null,
                resolve_had: null,
                currentRow: null,
                currentTreeInput: '',
                currentTreeId: '',
                updateSystemFlag: false,
                inputBox: false,
                disinputBox: true,
                inputbox: ''
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.getPage(1)
                }
            }
        },
        mounted() {
            let _this = this
            // 左侧树滚动条样式初始赋值
            this.sidebarStyle = this.$method.getScrollbarStyle()
            // 添加左侧树滚动条对象
            this.$method.addScrollbar(_this)

            this.$http.get('/esbProviderTree/selectByName', {
                id: 1,
                current: this.index || 1,
                size: 10
            }).then(result => {
                if (result.success) {
                    this.tableData = result.data.records
                    this.page = result.data
                    delete this.page['records']
                }
            })
        },
        methods: {
            // 目录树
            loadNode(node, resolve) {
                // let _this = this
                this.node_had = node
                this.resolve_had = resolve
                this.$http.get('/esbProviderTree/listMessage', {
                    id: node.data ? node.data.id : '' || 0
                }).then(result => {
                    // catalogueData: [],
                    //     nodesData: [],
                    let _this = this, arr = [], catalogueData = [], nodesData = []
                    setTimeout(() => {
                        _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                    }, 500)
                    for (let i = 0; i < result.data.length; i++) {
                        if (result.data[i].parId === 0) {
                            this.currentTreeInput = result.data[0].name

                            this.currentTreeId = result.data[0].id
                        }
                        if (result.data[i].haschildren === 1) {
                            catalogueData.push(result.data[i])
                        } else {
                            nodesData.push(result.data[i])
                        }
                    }
                    arr = [...nodesData, ...catalogueData]
                    return resolve(arr)

                })
            },

            // 节点迁移树
            loadNode1(node, resolve) {
                this.node_had = node
                this.resolve_had = resolve
                this.$http.get('/esbProviderTree/listMessage', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data

                    return resolve(result.data)

                })
            },
            // 目录迁移
            loadNode2(node, resolve) {
                // this.node_had = node
                // this.resolve_had = resolve
                this.$http.get('/esbProviderTree/listMessage', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)
                })
            },
            // 目录节点计数
            // getNodeNum() {

            // },

            // 跳转到原子服务页面
            gotolink() {
                this.$router.push({path: '/atomicService', query: {id: this.currentTree.data.code || this.detailsId}})

            },
            // 修改
            update2() {
                this.$http.get('/esbProviderTree/updateDirName', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '',
                    id: this.currentTree ? this.currentTree.data.id : '',
                    name: this.currentTreeInput
                }).then(result => {
                    if (result.success) {
                        if (this.currentTreeInput !== this.inputbox) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.inputbox = this.currentTreeInput
                            this.loadNode(this.node_had, this.resolve_had)
                        } else {
                            this.$message({
                                type: 'info',
                                message: '目录名称未改变!'
                            })
                        }

                    }
                })

            },

            updateSystemDet() {
                this.updateSystemFlag = true
                this.sysMsg = {...this.sysMsgDet}
            },

            // 保存系统信息修改
            updateSystem() {
                this.validate('sysMsg', () => {
                    if (this.currentTree.data.code === 0) {
                        this.$http.get('/esbProviderTree/update', {
                            id: this.detailsId,
                            manageName: this.sysMsg.manageName,
                            pName: this.sysMsg.pname,
                            pPhone: this.sysMsg.pphone,
                            systemName: this.sysMsg.systemName
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })

                                this.sysMsgDet = {...this.sysMsg}
                                this.updateSystemFlag = false
                                this.loadNode(this.node_had, this.resolve_had)
                            }
                        })
                    } else {
                        this.$http.get('/esbProviderTree/update', {
                            id: this.currentTree.data.code,
                            manageName: this.sysMsg.manageName,
                            pName: this.sysMsg.pname,
                            pPhone: this.sysMsg.pphone,
                            systemName: this.sysMsg.systemName
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.sysMsgDet = {...this.sysMsg}
                                this.updateSystemFlag = false
                                this.loadNode(this.node_had, this.resolve_had)
                            }
                        })
                    }

                })
                this.$http.get('/esbProviderTree/selectById', {
                    id: this.currentTree.data.code || this.detailsId
                }).then(result => {
                    if (result.success) {
                        // this.sysMsg = result.data
                        // this.sysMsgDet = {...result.data}
                        // this.sysMsgDet = {...this.sysMsg}
                    }
                })
            },

            // 删除表格选中整行信息
            del() {
                // console.log(this.detailsId)
                // console.log(this.currentTree.data)
                if (this.detailsId === null) {
                    this.$confirm('确定要删除该服务吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.get('/esbProviderTree/removeById', {
                            id: this.currentTree ? this.currentTree.data.code : ''
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.flag = false
                                this.providerSystemMsg = true
                                this.loadNode(this.node_had, this.resolve_had)
                                this.$http.get('/esbProviderTree/selectByName', {
                                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                    current: this.index || 1,
                                    size: 10
                                }).then(result => {
                                    if (result.success) {
                                        this.tableData = result.data.records
                                        this.page = result.data
                                        delete this.page['records']
                                    }
                                })
                            }
                        })
                    })
                } else {
                    this.$confirm('确定要删除该服务吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.get('/esbProviderTree/removeById', {
                            id: this.detailsId
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.flag = false
                                this.providerSystemMsg = true
                                this.loadNode(this.node_had, this.resolve_had)
                                this.$http.get('/esbProviderTree/selectByName', {
                                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                    current: this.index || 1,
                                    size: 10
                                }).then(result => {
                                    if (result.success) {
                                        this.tableData = result.data.records
                                        this.page = result.data
                                        delete this.page['records']
                                    }
                                })
                            }
                        })
                    })
                }
            },

            // 查询
            query() {
                this.$http.get('/esbProviderTree/selectByName', {
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    current: this.index || 1,
                    size: 10,
                    systemName: this.input
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            // 节点迁移
            migration(treeId) {
                this.nodeMigration = true
                this.$nextTick(() => {
                    this.id = treeId
                })
            },

            save() {
                this.$http.get('/esbProviderTree/dirMigration', {
                    id: this.id,
                    targetId: this.dirCurrentTree ? this.dirCurrentTree.data.id : '',
                    targetLvl: this.dirCurrentTree ? this.dirCurrentTree.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.nodeMigration = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        this.refreshNodeBy(1)
                        this.loadNode(this.node_had, this.resolve_had)
                        this.$http.get('/esbProviderTree/selectByName', {
                            id: this.currentTree.data.id,
                            current: this.index || 1,
                            size: 10
                        }).then(result => {
                            if (result.success) {
                                this.tableData = result.data.records
                                this.page = result.data
                                delete this.page['records']
                            }
                        })
                    }
                })
            },

            // 新增子目录
            addTree() {
                let subdirectory = this.ruleForm.name
                this.$http.get('/esbProviderTree/insert', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                    lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    name: subdirectory
                }).then(result => {
                    if (result.success) {
                        this.ruleForm.type = 1
                        this.visible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.ruleForm.name = ''
                        this.refreshNodeBy(1)
                        this.loadNode(this.node_had, this.resolve_had)
                    }
                })
            },
            // 删除目录
            delTree() {
                this.$confirm('确定要删除该目录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/esbProviderTree/deleteById', {
                        hasChildren: this.currentTree ? this.currentTree.data.haschildren : '',
                        id: this.currentTree ? this.currentTree.data.id : ''
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.currentTreeInput = ''
                            this.proUpdate = false
                            this.refreshNodeBy(1)
                            this.loadNode(this.node_had, this.resolve_had)
                        }

                    })
                })
            },

            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },

            // 新建系统
            addSystem() {
                this.validate('addForm', () => {
                    this.$http.get('/esbProviderTree/insertSystem', {
                        haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                        id: this.currentTree ? this.currentTree.data.id : '' || 1,
                        lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                        manageName: this.addForm.manageName,
                        pName: this.addForm.pname,
                        pPhone: this.addForm.pphone,
                        systemName: this.addForm.systemName,
                        systemCode: this.addForm.systemCode
                    }).then(result => {
                        if (result.success) {
                            this.newSystem = false
                            this.addForm.manageName = ''
                            this.addForm.pname = ''
                            this.addForm.pphone = ''
                            this.addForm.systemName = ''
                            this.addForm.systemCode = ''
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            })
                            this.loadNode(this.node_had, this.resolve_had)
                            this.$http.get('/esbProviderTree/selectByName', {
                                id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })

                        }
                    })
                })
            },

            // 分页
            getPage(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/esbProviderTree/selectByName', {
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    current: this.index || 1,
                    size: 10,
                    systemName: this.input
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            checkChange(data, node) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree = {
                    data,
                    node
                }
                this.currentTreeInput = this.currentTree.data.name
                this.inputbox = this.currentTree.data.name
                // console.log(this.currentTree.node)
                if (this.currentTree.node.data.id === 1) {
                    this.disinputBox = true
                    this.inputBox = false
                } else {
                    this.inputBox = true
                    this.disinputBox = false
                }
                if (this.currentTree.data.id === 1) {
                    this.directoryDeletion = false
                    this.proUpdate = false
                    this.directoryMigration = false
                } else {
                    this.directoryDeletion = true
                    this.proUpdate = true
                    this.directoryMigration = true
                }
                if (this.currentTree.data.haschildren === 0) {
                    this.providerSystemMsg = false
                    this.flag = true
                    this.$http.get('/esbProviderTree/selectById', {
                        id: this.currentTree.data.code
                    }).then(result => {
                        if (result.success) {
                            this.sysMsg = {...result.data}
                            this.sysMsgDet = {...result.data}
                        }
                    })
                } else {
                    this.providerSystemMsg = true
                    this.flag = false
                }
                this.$http.get('/esbProviderTree/selectByName', {
                    id: this.currentTree.data.id,
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            checkChange1(data, node, self, obj) {
                let _this = this
                setTimeout(() => {
                    _this.$method.updateView(false, false, _this, _this.$refs[obj])
                }, 500)
                this.dirCurrentTree = {
                    data,
                    node
                }
            },

            // 目录迁移
            checkChange2(data, node) {
                this.dirCurrentTree = {
                    data,
                    node
                }
            },
            save1() {
                this.$http.get('/esbProviderTree/dirMigration', {
                    id: this.currentTree ? this.currentTree.data.id : '',
                    targetId: this.dirCurrentTree ? this.dirCurrentTree.data.id : '',
                    targetLvl: this.dirCurrentTree ? this.dirCurrentTree.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.directoryTree = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        this.refreshNodeBy(1)
                    }
                })
            },
            refreshNodeBy(id) {
                let node = this.$refs.tree.getNode(id) // 通过节点id找到对应树节点对象
                node.loaded = false
                node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
            },
            handleClick(row) {
                this.$nextTick(() => {
                    this.detailsId = row.id
                })
                this.flag = true
                this.providerSystemMsg = false
                this.$http.get('/esbProviderTree/selectById', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.sysMsg = {...result.data}
                        this.sysMsgDet = {...result.data}
                    }
                })
            },
            // 当进入表格鼠标hover这一行的时候触发事件
            handClick(row) {
                this.$nextTick(() => {
                    this.detailsId = row.id
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleNodeClick(data) {

            },

            // 弹框操作
            close(obj) {
                this.visible = false
                this.nodeMigration = false
                this.directoryTree = false
                this.providerSystemMsg = true
                this.flag = false
            },
            addClose() {
                this.newSystem = false
                this.$refs.addForm.resetFields()
            },
            updateAddClose() {
                this.updateSystemFlag = false
                this.$refs.sysMsg.resetFields()
            },
            tabCurrentChange(currentRow, oldCurrentRow) {
                this.currentRow = currentRow
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            scrollBar
        }
    }
</script>
<style scoped lang="less">
    .serviceContent {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        width: 3rem;
    }

    .message {
        min-height: calc(100% - 1.6rem);
    }

    .sysDet {
        margin-top: .4rem;
    }

    .el-link {
        font-size: .14rem;
    }

    .catalogue {
        font-size: .16rem;
    }

    .second {
        margin: 0 0.1rem;
        /* position: relative; */
        border-left: 0.01rem solid #ccc;
        border-right: 0.01rem solid #ccc;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        height: 0.15rem;
        line-height: 0.15rem;

    }

    .tree {
        padding: .2rem;
    }

    .tree1 {
        height: 2rem;
        overflow-y: auto;
    }

    .file {
        color: #FFCA28;
    }

    .sys {
        color: #5586FB;
    }

    .current {
        span {
            float: left;
            line-height: .4rem;
        }

        .el-input {
            float: left;
            width: 3rem;
            font-size: .16rem;
            color: #5586FB;
        }

        .el-button {
            margin-left: .3rem;
        }
    }

    .system-details {
        font-size: .16rem;
        height: 100%;

        .sysMsg {
            min-height: .4rem;
            /*height: .4rem;*/
            border-bottom: .01rem solid #E1E1E1;
            margin-bottom: .3rem;
            margin-right: 1rem;

            .sysTitle {
                color: #999;
                margin-right: .2rem;
            }

            .sysContenrt {
                /*float: left;*/
                width: 3rem;
                overflow-wrap: break-word;
                display: inline-block;
                vertical-align: text-top;
            }
        }

    }

    .toolbar {
        font-size: 0.16rem;

        .current {
            > span {
                color: #999;
            }
        }
    }
</style>
